<template>
    <div class="white-box">
        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <el-table-column prop="title" label="标题" min-width="140" />
            <el-table-column prop="content" label="内容" min-width="300" />
            <el-table-column label="用户信息" min-width="220">
                <template #default="{ row }">
                    <template v-if="row.user">
                        <p>{{ row.user.name ? row.user.name : row.user.nickname }}[UID: {{ row.user.uid }}]</p>
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="联系电话" min-width="140">
                <template #default="{ row }">
                    <span v-if="row.user">{{ row.user.mobile }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="created_at_label" label="创建时间" min-width="180" />
            <el-table-column label="操作" width="120" fixed="right">
                <template #default="{ row }">
                    <el-button link type="primary" class="theme-btn" @click="clickDetail(row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>

        <!-- 详情 -->
        <el-drawer
            title="详情"
            v-model="drawerDetail"
            direction="rtl"
            size="530px"
            :append-to-body="true"
            :destroy-on-close="true"
            @close="drawerDetail = false"
        >
            <div class="xq-box">
                <detail-item
                    title="反馈用户"
                    :value="`${objs.user.name ? objs.user.name : objs.user.nickname}[${objs.user.uid}]`"
                    bottom="24px"
                    v-if="objs.user"
                />
                <detail-item title="联系电话" :value="objs.user.mobile" bottom="24px" v-if="objs.user" />
                <detail-item title="反馈标题" :value="objs.title" bottom="24px" />
                <detail-item title="反馈内容" :value="objs.content" bottom="24px" />
                <detail-item title="反馈时间" :value="objs.created_at_label" bottom="24px" />
                <detail-item title="反馈图片" bottom="24px">
                    <div class="img-list">
                        <div class="img-selects" v-for="(item, index) in objs.photos" :key="index">
                            <el-image
                                class="img-selects__pic"
                                :src="proxy.imgUrl + item.photo + '!img_400'"
                                :preview-src-list="srcList"
                                :initial-index="index"
                                fit="cover"
                            />
                        </div>
                    </div>
                </detail-item>
            </div>
        </el-drawer>

        <go-back />
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch } from "vue"
import OneLoad from "@mixins/one-load"
import GoBack from "@components/GoBack.vue"
import DetailItem from "@components/DetailItem.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getList()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, pubParams, getdata } = OneLoad()
// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})

function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
    }
    getdata("order/fb/index", params)
}

/**
 * 详情
 * @param {Object} objs 详情
 * @param {Boolean} drawerDetail 弹窗状态
 * @param {Array} srcList 图片预览
 */
const objs = ref({})
const srcList = ref([])
const drawerDetail = ref(false)
const clickDetail = (row) => {
    drawerDetail.value = true
    getDetail(row.fid)
}
function getDetail(id) {
    proxy.$axios
        .get("order/fb/detail", {
            params: {
                fid: id,
            },
        })
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                for (let i = 0; i < result.photos.length; i++) {
                    srcList.value.push(proxy.imgUrl + result.photos[i].photo)
                }
                objs.value = result
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}
</script>
<script>
export default {
    name: "Feedback",
}
</script>

<style lang="less" scoped></style>
